const loveMe = document.querySelector('.loveMe')
const times = document.getElementById('times')

let clickTime = 0
let timesClicked = 0

loveMe.addEventListener('click', (e) => {
    if (clickTime === 0) {
        clickTime = new Date().getTime()
    } else {
        if ((new Date().getTime() - clickTime) < 800) {
            clickTime = 0
            createHeart(e)
        } else {
            clickTime = new Date().getTime()
        }
    }
})

const createHeart = (e) => {
    const x = e.clientX
    const y = e.clientY

    const left = e.target.offsetLeft
    const top = e.target.offsetTop

    const heart = document.createElement('i')
    heart.classList.add('fas')
    heart.classList.add('fa-heart')

    heart.style.left = `${x - left}px`
    heart.style.top = `${y - top}px`

    loveMe.appendChild(heart)

    timesClicked++
    times.innerText = timesClicked
    


    setTimeout(() => {
        heart.remove();
    }, 800)

}